﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="control.css" rel="stylesheet" />
</head>
<body>
    <div class="split" data-orientation="vertical" data-limit="50" data-position="70%">

        <div class="tree-view-wrapper panel-left">
            <x-controlbar>
                <x-action event="refresh" tabindex="0"><i class="fa fa-circle"></i> Refresh</x-action>
                <x-action event="inspectFromClient" tabindex="0"><i class="fa fa-crosshairs"></i></x-action>
                
                <input type="text" aria-label="Here, search for a node by CSS selector" placeholder="search node by css selector" id="searchinput" />
                <div id="searchresults"></div>
            </x-controlbar>
            <div id="treeView" class="code-text"></div>
            <div class="domload-spinner">
                <div class="fa fa-spinner fa-spin fa-3x"></div>
            </div>
        </div>
        <div class="style-view-wrapper panel-right code-text">
            <div id="accordion">
                <h3 class="stylessection visible">styles</h3>
                <div id="stylessection" class="visible accordion-section">
                    <div id="styleView">
                    </div>
                </div>
                <h3 class="layoutsection">layout</h3>
                <div id="layoutsection" class="accordion-section hide">
                    <div class="margin">
                        <div class="label">margin</div>
                        <div class="container" id="margincontainer">
                            <div class="top"></div>
                            <div class="bottom"></div>
                            <div class="right"></div>
                            <div class="left"></div>
                        </div>
                        <div class="border">
                            <div class="label">border</div>
                            <div class="container" id="bordercontainer">
                                <div class="top"></div>
                                <div class="bottom"></div>
                                <div class="right"></div>
                                <div class="left"></div>
                            </div>
                            <div class="padding">
                                <div class="label">padding</div>
                                <div class="container" id="paddingcontainer">
                                    <div class="top"></div>
                                    <div class="bottom"></div>
                                    <div class="right"></div>
                                    <div class="left"></div>
                                </div>
                                <div class="size" id="sizecontainer">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <h3 class="computedsection">Computed styles</h3>
                <div id="computedsection" class="accordion-section"></div>
                <h3 class="htmlsection">html</h3>
                <div id="htmlsection" class="accordion-section">
                    <x-controlbar>
                        <x-action event="gethtml" tabindex="0"><i class="fa fa-refresh"></i></x-action>
                        <x-action event="savehtml" tabindex="0"><i class="fa fa-save"></i></x-action>
                    </x-controlbar>
                    <textarea id="innerHTMLView"></textarea>
                </div>
                <h3 class="settingssection">settings</h3>
                <div id="settingssection" class="accordion-section">
                    <div id="settings">
                        <div>
                            Auto refresh
                            <div class="switch-wrapper">
                                <input type="checkbox" name="auto refresh" id="autorefresh" />
                            </div>
                        </div>
                        <div>
                            Global load
                            <div class="switch-wrapper">
                                <input type="checkbox" name="global load" id="globalload" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    </script>
</body>
</html>
